/**
 * Created by tuyidong on 2017/5/3.
 */
import React, {Component, PropTypes} from 'react'
import {Row, Col, Form, Input, Select, Button, Table, Pagination, Modal, Upload, Icon} from 'antd'
import {Link} from 'react-router'

const FormItem = Form.Item;
const Option = Select.Option;
const confirm = Modal.confirm;

class Integralexchange extends Component {
    constructor(props) {
        super(props);
        //定义表格头部信息
        const GridHead = [
            {
                title: '活动标识',
                dataIndex: 'id',
                key: 'id'
            }, {
                title: '活动名称',
                dataIndex: 'actName',
                key: 'actName',
            }, {
                title: '开始时间',
                dataIndex: 'startTime',
                key: 'startTime',
            }, {
                title: '结束',
                dataIndex: 'endTime',
                key: 'endTime',
            }, {
                title: '操作',
                key: 'cation',
                render: (text, record) => (
                    <span>
                 <a href="#" onClick={() => this.manageActGoodsClick(record) }>管理活动商品</a>
            </span>
                )
            }
        ]
        //弹出框表格表头信息
        const OpenBoxGridHead = [
            {
                title: '商品名称',
                dataIndex: 'goodsName',
                key: 'goodsName'
            }, {
                title: '商品类型',
                dataIndex: 'goodsType',
                key: 'goodsType',
            }, {
                title: '兑换积分',
                dataIndex: 'integralValue',
                key: 'integralValue',
            }, {
                title: '抵扣方式',
                key: 'exchangeMethod',
                render:(text,record)=>{
                    if( record.exchangeMethod==="1" ){
                        return(<span>积分全额</span>)
                    }
                    else{
                        return(<span>金钱+积分</span>)
                    }
                }
            }, {
                title: '抵扣金额',
                dataIndex: 'amount',
                key: 'amount',
            }, {
                title: '奖品总/剩下',
                key: 'goodsNum',
                render:(text,record) =>(
                    <sapn>{record.goodsNum}/{record.leftGoodsNum}</sapn>
                )
            }, {
                title: '活动状态',
                key: 'status',
                render:(text,record)=>{
                    if(record.status=="1"){
                        return(<span>待发布</span>)
                    }
                    else if(record.status=="2") {
                        return (<span>未开始</span>)
                    }
                    else if(record.status=="3"){
                        return(<span>进行中</span>)
                    }
                    else if(record.status=="4"){
                        return(<span>已结束</span>)
                    }
                    else if(record.status=="5"){
                        return(<span>已取消</span>)
                    }
                }
            },{
                title: '操作',
                key: 'cation',
                render: (text, record) => (
                    <span>
                 <a href="#" onClick={() => this.editThisGoods(record) }>编辑</a>
                        -<a href="#" onClick={() => this.delectThisGoods(record) }>删除</a>
            </span>
                )
            }
        ]

        //初始化state值
        this.state = {
            //弹出框model的初始化值
            actGoodsDetailKey:"actGoodsDetail",
            actGoodsDetailVisible:false,
            actGoodsDetailTitle:'活动商品管理',
            //修改活动商品信息初始化
            actGoodsEditKey:"actGoodsEdit",
            actGoodsEditVisible:false,
            actGoodsEditTitle:'活动商品编辑',
            //列表分页条件信息
            pagination: {
                total: 10,
                current: 1
            },
            actId: null,
            actName: null,
            grid: {
                columns: GridHead,
                data: []
            },
            openBoxGrid:{
                columns: OpenBoxGridHead,
                data: []
            }
        };
    }
    //页面上清除按钮执行重置查询条件操作
    resetSearch = (e) => {
        e.preventDefault();
        console.log('点击了查询按钮');
    }
    //点击搜索或者回车后执行
    handleSubmit = (e) => {
        e.preventDefault();
    }

    //点击分页将当前页面赋值给state下的current
    handlePagination = (page, pageSize) => {
        console.log(page, pageSize)
        this.setState({
            pagination: {
                total: pageSize,
                current: page
            }
        })

    }
    // 点击商品列表的管理活动商品弹出模态框
    manageActGoodsClick = (record) =>{
        console.log(record)
        let _girdData = this.state.openBoxGrid;
        _girdData.data = record.goodsList;
        this.setState({
            actGoodsDetailVisible:true,
            openBoxGrid:_girdData
        })
    }
    //在弹出框中 表格的一行商品点击 编辑对商品进行编辑操作
    editThisGoods = (record) =>{
        this.setState({
            actGoodsEditVisible:true
        })
    }
    //活动商品编辑页，点击ok or 取消修改
    EditGoodsBoxOK = (e)=>{
        this.setState({
            actGoodsEditVisible:false
        })
    }
    EditGoodBoxCancel= (e)=>{
        this.setState({
            actGoodsEditVisible:false
        })
    }
    //在弹出框中点击删除，删除活动商品
    delectThisGoods = (record) =>{
        confirm({
            title: '请确定是否要删除该活动商品',
            content: '点击“取消”按钮取消操作，点击“确认”按钮删除活动中此商品',
            onOk() {
                console.log('OK');
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }
    // 点击模态框的关闭按钮触发
    DetailGoodBoxCancel = (e) =>{
        e.preventDefault()
        this.setState({
            actGoodsDetailVisible:false
        })
    }
    //弹出框点击确定
    DetailGoodBoxOk = (e) => {
        e.preventDefault()
        this.setState({
            actGoodsDetailVisible:false
        })
    }
    //页面渲染完成后执行代码
    componentDidMount() {
        let muckData = {
            Total: 10,
            pageNo: 0,
            pageSize: 10,
            dataList: [
                {
                    "id": "4211",
                    "actId": "123",
                    "actCode": "act4211",
                    "actName": "端午节兑换活动",
                    "goodsList": [
                        {
                            "goodsId": "302",
                            "goodsName": "路由器",
                            "goodsDesc": "和目",
                            "goodsType":"实物",
                            "goodsImg": "和目",
                            "price": "原价格",
                            "integralPrice": "url://",
                            "integralValue": "100",
                            "exchangeMethod": "1",
                            "amount": "89",
                            "goodsNum": 12,
                            "leftGoodsNum": 5,
                            "exchangeNumLimit": 1,
                            status:1
                        },
                        {
                            "goodsId": "442",
                            "goodsName": "网络高清摄像头",
                            "goodsDesc": "和目",
                            "goodsType":"实物",
                            "goodsImg": "和目",
                            "price": "原价格",
                            "integralPrice": "url://",
                            "integralValue": "100",
                            "exchangeMethod": "1",
                            "amount": "89",
                            "goodsNum": 12,
                            "leftGoodsNum": 5,
                            "exchangeNumLimit": 1,
                            status:2
                        }
                    ],
                    "startTime": "2017-01-01 13:21:12",
                    "endTime": "2017-01-01 13:21:12",
                    "status": "1",
                    "createTime": "2017-01-01 12:12:12",
                    "updateTime": "2017-01-01 12:12:12"
                },
                {
                    "id": "4222",
                    "actId": "1123",
                    "actCode": "act4222",
                    "actName": "春节新春活动",
                    "goodsList": [
                        {
                            "goodsId": "302",
                            "goodsName": "和目",
                            "goodsDesc": "和目",
                            "goodsImg": "和目",
                            "price": "原价格",
                            "integralPrice": "url://",
                            "integralValue": "100",
                            "exchangeMethod": "1",
                            "amount": "89",
                            "goodsNum": 12,
                            "leftGoodsNum": 5,
                            "exchangeNumLimit": 1
                        }
                    ],
                    "startTime": "2017-01-01 13:21:12",
                    "endTime": "2017-01-01 13:21:12",
                    "status": "1",
                    "createTime": "2017-01-01 12:12:12",
                    "updateTime": "2017-01-01 12:12:12"
                }
            ]
        };
        let grid = this.state.grid;
        grid.data =  muckData.dataList;
        this.setState({
            grid: grid
        })
        //页面渲染完成后获取列表代码
        // apiInfo({
        //     path: '/v1/records/',
        //     method: 'get'
        // }).then((data) => {
        //     console.log(data)
        // })
    }
    render() {
        const state = this.state;
        //弹出框表单元素布局使用
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 14 },
            },
        };
        return (
            <div>
                <Form onSubmit={this.handleSubmit}>
                    <FormItem>
                        <Row style={{marginTop: 20, marginBottom: 15}}>
                            <Col span={3} offset={2}>
                                <Input type="text" defaultValue={state.actId} style={{width: 150}}
                                       placeholder="活动编码"/>
                            </Col>
                            <Col span={3}>
                                <Input type="text" defaultValue={state.actName} style={{width: 150}}
                                       placeholder="活动名称"/>
                            </Col>
                            <Col span={2}>
                                <Button type="primary" htmlType="submit">查询</Button>
                            </Col>
                            <Col span={2}>
                                <Button onClick={this.resetSearch}>清除</Button>
                            </Col>
                            <Col span={2} offset={6}>
                            </Col>
                        </Row>
                        <Row style={{marginRight: 40}}>
                            <Col offset={2}>
                                <Table pagination={false} rowKey="id" bordered columns={this.state.grid.columns}
                                       dataSource={this.state.grid.data}/>
                                <Pagination onChange={this.handlePagination}
                                            current={this.state.pagination.current}
                                            total={this.state.pagination.total}
                                />
                            </Col>
                        </Row>
                    </FormItem>
                </Form>
                <Modal
                    width={900}
                    maskClosable ={false}
                    key={this.state.actGoodsDetailKey}
                    visible={this.state.actGoodsDetailVisible}
                    title={this.state.actGoodsDetailTitle}
                    onOk={this.DetailGoodBoxOk}
                    onCancel={this.DetailGoodBoxCancel}
                    footer={[
                        <Button key="back" size="large" onClick={this.DetailGoodBoxCancel}>返回</Button>,
                        <Button key="submit" type="primary" size="large" loading={this.state.loading}
                                onClick={this.DetailGoodBoxOk}>
                            确定
                        </Button>
                    ]}
                >
                    <Table pagination={false} rowKey="goodsId" bordered columns={this.state.openBoxGrid.columns}
                           dataSource={this.state.openBoxGrid.data}/>
                </Modal>
                <Modal
                    width={600}
                    maskClosable ={false}
                    key={this.state.actGoodsEditKey}
                    visible={this.state.actGoodsEditVisible}
                    title={this.state.actGoodsEditTitle}
                    onOk={this.EditGoodsBoxOK}
                    onCancel={this.EditGoodBoxCancel}
                    footer={[
                        <Button key="back" size="large" onClick={this.EditGoodBoxCancel}>返回</Button>,
                        <Button key="submit" type="primary" size="large" loading={this.state.loading}
                                onClick={this.EditGoodsBoxOK}>
                            确定
                        </Button>
                    ]}
                >
                    <Form>
                        <FormItem
                            {...formItemLayout}
                            label="活动名称"
                        >
                            <Input value={"端午节划龙舟比赛"} placeholder="输入活动名称"/>
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="商品名称"
                        >
                            <Select  placeholder="请选择商品" >
                                <Option value="2">路由器</Option>
                                <Option value="1">摄像头</Option>
                                <Option value="3">充值卡</Option>
                            </Select>
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="编码"
                        >
                            <Input value={"4055"} placeholder="输入编码"/>
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="兑换积分"
                        >
                            <Input value={"4055"} type='number' placeholder="输入积分"/>
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="抵扣方式"
                        >
                            <Select  placeholder="请选择抵扣方式" >
                                <Option value="1">积分全额</Option>
                                <Option value="2">金钱+积分</Option>

                            </Select>
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="抵扣金额"
                        >
                            <Input value={"4055"} type='number' placeholder="输入抵扣金额"/>
                        </FormItem>
                        <FormItem
                            {...formItemLayout}
                            label="商品数量"
                        >
                            <Input value={"4055"} type='number' placeholder="输入商品数量"/>
                        </FormItem>
                    </Form>
                </Modal>
            </div>
        );
    }
}

export default Integralexchange